<template>
  <div ref="container" style="height:95%"></div>
</template>

<script>
import { Line } from '@antv/g2plot';
export default {
  data() {
    return {}
  },
  methods: {
    loadCharts() {
      function getData() {
        // generate an array of random data
        const data = [];
        const time = new Date().getTime();

        for (let i = -19; i <= 0; i += 1) {
          data.push({
            x: time + i * 1000,
            y: Math.random() + 0.2,
          });
        }
        return data;
      }

      const line = new Line(this.$refs['container'], {
        data: getData(),
        padding: 'auto',
        xField: 'x',
        yField: 'y',
        color: '#5b8ff9',
        xAxis: {
          type: 'time',
          mask: 'HH:MM:ss',
        },
        smooth: true,
        point: {
          size: 5,
          shape: 'circle',
          style: {
            fill: 'white',
            stroke: '#5B8FF9',
            lineWidth: 2,
          },
        },
      });

      line.render();

      setInterval(() => {
        const x = new Date().getTime(), // current time
          y = Math.random() + 0.2;
        const newData = line.options.data.slice(1).concat({ x, y });
        line.changeData(newData);
      }, 1000);
    }
  },
  mounted() {
    this.loadCharts();
  }
}
</script>

<style>

</style>